<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>百分比</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			html, body {
				height: 100%;
			}

			.red {
				width: 80%;
				height: 20%;
				/* 最小高度 */
				/* 阈值: 设置一个临界点; */
				min-height: 100px;
				background-color: red;
				margin: 0 auto;
				/* 最小宽度 */
				min-width: 800px;
				/* 最大宽度 */
				max-width: 960px;
				/* 最大高度 */
				max-height: 200px;
			}

			.box {
				width: 600px;
				height: 400px;
				background-color: blue;
			}

		.in {
				width: 50%;

				/* 
					注意: padding-top padding-bottom, margin-top, 	margin-bottom是相对于父级的宽度;
			    */
				padding-top: 50%;
				background-color: yellow;
			}


		</style>
	</head>
	<body>

		<div class="red"></div>
		<div class="box">
			<div class="in"></div>
		</div>
		
	</body>
</html>